<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery.js"></script>
    <style>
                *{
            margin:0px;
            padding:0px;
        }
        
        .outer{
            position:relative;
            width:800px;
            height:400px;
            border:dashed cadetblue 2px;
            margin:100px auto;
        }
        ul li{
            list-style:none;
        }
        img{
            width: 100%;
            height:400px;
            position:absolute;
            top:0px;
            left:0px;
        }
        .num{
            position:absolute;
            bottom:10px;
            font-size:0px;
            width:100%;
            text-align:center;
        }
        .num li{
            width:20px;
            height:20px;
            background-color:gray;
            border-radius:60%;
            text-align:center;
            line-height:20px;
            display:inline-block;
            font-size:10px;
            margin:3px;
            cursor:pointer;
 
 
        }
        .button{
            width:20px;
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:gray;
            opacity:0.6;
            position:absolute;
            top:50%;
            margin-top:-30px;
            font-size:20px;
            font-weight:bolder;
            display:none;
            cursor:pointer;
        }
        .btn_right{
            position:absolute;
            right:0px;
        }
        .outer:hover .button{
            display:block;
        }
        .outer .num li.current{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="img">
            <li><img src="./img/美女1.webp"></li>
            <li><img src="./img/美女2.webp"></li>
            <li><img src="./img/美女3.webp"></li>
            <li><img src="./img/美女4.webp"></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn_left button"> &lt;</div>
        <div class="btn_right button"> &gt; </div>
 
    </div>
    <script>
         //初始时，索引1背景为红色，并显示第一张图片，
        $(".num li").first().addClass("current");
        $(".img li").first().show().siblings().hide();
        //鼠标over在索引值上时，切换图片，并将当前索引复制给全局变量i，便于接下来从当前图片开始轮播
        $(".num li").mouseover(function(){
            $(this).addClass("current").siblings().removeClass("current");
            var index=$(this).index();
            $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            i=index;
        });
        
        i=0;//全局变量，记录当前轮播图的索引
        //播放下一张图片的函数
        function move(){
            i++;
            if (i>3){
                i=0;
            }
            $(".num li").eq(i).addClass("current").siblings().removeClass("current");
            $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
 
        }
        //每2s播放下一张图片
        var time=setInterval(move,2000);
        //鼠标放在.outer区域时，轮播停止；离开时，轮播继续
        $(".outer").hover(function(){
            clearInterval(time)
            $(".num").show()
        },function(){
            time=setInterval(move,2000);
            $(".num").hide()
        });
        //点击向右翻页
 
        $(".btn_right").click(function(){
            move();
        });
 
        //点击向左翻页时，先将i-2,再向右翻页
        $(".btn_left").click(function(){
            i=i-2;
            if (i<-1){
                i=2;
            }
            move();
        })
 


    </script>
</body>
</html>